<template>
  <view class="todo-detail">
    <view class="detail-card">
      <view class="detail-header">
        <view class="detail-title">
          <!-- <u-checkbox v-model="todoData.checked" shape="circle" @change="onCheckboxChange"></u-checkbox> -->
          <text :class="{'completed': todoData.status === 2}">{{ todoData.title }}</text>
        </view>
        <view class="detail-tags">
          <u-tag v-if="todoData.priority === 2" type="error" text="紧急" size="mini" />
          <u-tag v-else-if="todoData.priority === 1" type="warning" text="重要" size="mini" />
          <u-tag v-if="todoData.status === 0" type="info" text="待办" size="mini" />
          <u-tag v-else-if="todoData.status === 1" type="primary" text="进行中" size="mini" />
          <u-tag v-else-if="todoData.status === 2" type="success" text="已完成" size="mini" />
        </view>
      </view>
      
      <view class="detail-content" v-if="todoData.content">
        <u-parse :content="todoData.content"></u-parse>
      </view>
      
      <view class="detail-info">
        <view class="info-item">
          <text class="info-label">截止时间</text>
          <text class="info-value">{{ formatDate(todoData.deadline) }}</text>
        </view>
        <view class="info-item" v-if="todoData.remindTime">
          <text class="info-label">提醒时间</text>
          <text class="info-value">{{ formatDate(todoData.remindTime) }}</text>
        </view>
        <view class="info-item" v-if="todoData.completeTime">
          <text class="info-label">完成时间</text>
          <text class="info-value">{{ formatDate(todoData.completeTime) }}</text>
        </view>
        <view class="info-item">
          <text class="info-label">创建时间</text>
          <text class="info-value">{{ formatDate(todoData.createTime) }}</text>
        </view>
      </view>
    </view>
    
    <view class="action-bar">
      <u-button type="primary" @click="editTodo">编辑</u-button>
      <u-button type="error" @click="deleteTodoItem">删除</u-button>
    </view>
  </view>
</template>

<script>
import { getTodoById, updateTodoStatus, deleteTodo } from '@/api/todo'
import { formatDate } from '@/utils/date'

export default {
  data() {
    return {
      todoId: null,
      todoData: {
        id: null,
        title: '',
        content: '',
        deadline: null,
        priority: 0,
        status: 0,
        remindTime: null,
        completeTime: null,
        createTime: null,
        updateTime: null,
        checked: false
      }
    }
  },
  onLoad(options) {
    if (options.id) {
      this.todoId = options.id
      this.loadTodoDetail()
    } else {
      uni.showToast({
        title: '参数错误',
        icon: 'none'
      })
      setTimeout(() => {
        uni.navigateBack()
      }, 1500)
    }
  },
  methods: {
    formatDate,
    async loadTodoDetail() {
      try {
        const res = await getTodoById(this.todoId)
        this.todoData = {
          ...res,
          checked: res.status === 2
        }
      } catch (error) {
        console.error('获取待办事项详情失败', error)
        uni.showToast({
          title: '获取详情失败',
          icon: 'none'
        })
      }
    },
    async onCheckboxChange() {
      try {
        const newStatus = this.todoData.checked ? 2 : 0
        await updateTodoStatus(this.todoId, newStatus)
        this.todoData.status = newStatus
        
        uni.showToast({
          title: newStatus === 2 ? '已完成' : '已取消完成',
          icon: 'none'
        })
        
        // 重新加载详情，获取最新的完成时间等信息
        this.loadTodoDetail()
      } catch (error) {
        console.error('更新待办事项状态失败', error)
        this.todoData.checked = !this.todoData.checked
      }
    },
    editTodo() {
      uni.navigateTo({
        url: `/pages/todo/edit?id=${this.todoId}`
      })
    },
    async deleteTodoItem() {
      uni.showModal({
        title: '确认删除',
        content: '确定要删除这个待办事项吗？',
        success: async (res) => {
          if (res.confirm) {
            try {
              await deleteTodo(this.todoId)
              
              uni.showToast({
                title: '删除成功',
                icon: 'success'
              })
              
              setTimeout(() => {
                uni.navigateBack()
              }, 1500)
            } catch (error) {
              console.error('删除待办事项失败', error)
            }
          }
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.todo-detail {
  padding: 30rpx;
  
  .detail-card {
    background-color: #fff;
    border-radius: 12rpx;
    padding: 30rpx;
    margin-bottom: 30rpx;
    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
    
    .detail-header {
      margin-bottom: 30rpx;
      
      .detail-title {
        display: flex;
        align-items: center;
        margin-bottom: 20rpx;
        
        text {
          font-size: 36rpx;
          font-weight: bold;
          margin-left: 20rpx;
          
          &.completed {
            text-decoration: line-through;
            color: #999;
          }
        }
      }
      
      .detail-tags {
        display: flex;
        flex-wrap: wrap;
        
        .u-tag {
          margin-right: 20rpx;
          margin-bottom: 10rpx;
        }
      }
    }
    
    .detail-content {
      margin-bottom: 30rpx;
      padding: 20rpx;
      background-color: #f9f9f9;
      border-radius: 8rpx;
      font-size: 28rpx;
      line-height: 1.6;
    }
    
    .detail-info {
      .info-item {
        display: flex;
        justify-content: space-between;
        padding: 20rpx 0;
        border-bottom: 1px solid #f5f5f5;
        
        &:last-child {
          border-bottom: none;
        }
        
        .info-label {
          color: #999;
          font-size: 28rpx;
        }
        
        .info-value {
          color: #333;
          font-size: 28rpx;
        }
      }
    }
  }
  
  .action-bar {
    display: flex;
    justify-content: space-between;
    
    .u-button {
      flex: 1;
      margin: 0 20rpx;
      
      &:first-child {
        margin-left: 0;
      }
      
      &:last-child {
        margin-right: 0;
      }
    }
  }
}
</style> 